<template>
  <div class="enterbox">
    <div class="topbox" @click.stop="hidelogin">
      <i class="iconfont icon-guanbi"></i>
    </div>
    <div class="content">
      <div class="first">请输入验证码</div>
      <div class="alredy">
        <div>已发送至&nbsp;+86&nbsp;{{number|secret}}</div>
        <div v-show="time>=1" class="time">{{time}}S</div>
        <div class="again" v-show="time<1" @click.stop="again">重新发送验证码</div>
      </div>
      <div class="codecontent">
        <van-password-input :length="4" :value="value" :mask="false" :focused="showKeyboard" @focus="showKeyboard = true" />
        <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
      </div>
    </div>
  </div>
</template>

<script>
import { loginenter } from "../assets/api/login";
import { sendcode } from "../assets/api/login";
import { verifycode } from "../assets/api/login";
import { checkphone } from "../assets/api/login";
import { register } from "../assets/api/login";
import { initnickname } from "../assets/api/login";
export default {
  data() {
    return {
      showKeyboard: false,
      value: "",
      number: "",
      timeout: null,
      time: 60,
    };
  },
  methods: {
     hidelogin() {
      this.$emit("hidelogson");
    },
    again() {
      sendcode({ phone: this.number }).then((data) => {
        console.log(data);
      });
      this.time = 60;
      this.timeout = setInterval(() => {
        this.time -= 1;
        if (this.time < 1) {
          clearInterval(this.timeout);
          this.time = 0;
        }
      }, 999);
    },
  },
  created() {
    this.number = this.$route.params.phonenumber;
    this.again();
  },
  filters: {
    secret(value) {
      return value.substr(0, 3) + "****" + value.substr(7, value.length);
    },
  },
  watch: {
    value(newV) {
      if (newV.length == 4) {
        //要是长度为4就开始验证
        verifycode({phone:this.number,captcha:this.value}).then((data) => {
          if (data == undefined) {
            this.$toast("验证码错误");
            this.value = "";
          } else {
            checkphone({ phone: this.number }).then((data) => {
              if (data.exist == 1) {
                
                loginenter();
                this.$emit("checklogingrandson");
                this.$emit("hideloginson");
              } else {
                register({
                  phone: this.number,
                  password: 1,
                  captcha: newV,
                  nickname: "123123",
                });
                initnickname();
                this.$emit("hideloginson");
              }
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="less">
.enterbox {
  padding: 60px 15px;
  height: 100%;
  i{
    &.icon-guanbi{
      font-size: 24px;
    }
  }
  div {
    &.first {
      margin-top: 8%;
      font-size: 18px;
    }
    &.alredy {
      font-size: 14px;
      display: flex;
      margin-top: 4%;
      font-weight: lighter;
      justify-content: space-between;
      align-items: center;
      .again {
        font-size: 14px;
        background-color: #c73e2c;
        color: white;
        width: 130px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 100px;
        padding: 0;
      }
    }
  }
}
</style>